<script setup>
import { ref } from 'vue'
</script>
<template>
  <div class="card">
    <CommonTitle title="雷达信息" />
    <div class="info">
      <div class="left">
        <img src="@img/infrastructure/radar.png" alt="" />
      </div>
      <div class="right">
        <p><span>·经度：</span>114.31236143</p>
        <p><span>·纬度：</span>22.691349</p>
        <p><span>·海拔：</span>5 m</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 10px;

  .info {
    width: 100%;
    height: 158px;
    display: flex;
    padding: 20px;
    margin-top: 10px;
    align-items: center;
    padding: 0 10px;
    background: url('@img/infrastructure/radar_bg.png');
    background-size: 100% 100%;

    .left {
      flex: 0 0 135px;
      margin-left: 20px;

      img {
        width: 100%;
      }
    }

    .right {
      height: 100%;
      margin-left: 10px;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p {
        span:first-child {
          color: rgba(175, 235, 255, 1);
        }
      }
    }
  }
}
</style>
